<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的音乐-CC音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
<jsp:include page="headLink.jsp"></jsp:include>
<link
	href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"
	rel="stylesheet">
<!-- <link rel="stylesheet" href="css/profile.css"> -->
<!-- <link rel="stylesheet" href="css/layout_0321.css"> -->
<!-- <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0321.css?max_age=25920000&v=20190312" /> -->
<!-- <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/profile.css?max_age=2592000&v=20181206" /> -->
</head>
<body>
	<jsp:include page="playit.jsp"></jsp:include>
	<!--整个页面-->
	<div class="lyear-layout-container">
		<!--导航栏-->
		<header class="lyear-layout-header"> <!--保持居中的秘密不可更改！！！-->
		<div class="header-container">
			<div class="header-top">
				<a href="homePage.jsp" class="logo"></a>
				<nav class="header-nav">
				<ul>
					<li><a href="homePage.jsp" target="">音乐馆</a></li>
					<li><a href="#rank" class="header-nav__cur">搜索列表</a></li>
				</ul>
				</nav>
				<div class="header-search">
					<input type="text" id="searchmusic" class="szh_text" placeholder="搜索" onkeypress="if(event.keyCode==13)searchMusic()">
					<!--<div class="btn"><i class="icon-sprite"></i></div>-->
					<div class="result">
						<a href="#" class="result-item"> <span class="rank">1</span> <span
							class="title">默</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">2</span>
							<span class="title">侧田</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">3</span>
							<span class="title">让我留在你身边</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">4</span>
							<span class="title">皮皮虾我们走</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">5</span>
							<span class="title">欢乐好声音</span> <span class="num">3.4万</span>
						</a>
						<div class="history">
							<span>搜索历史</span> <i class="icon-sprite"></i>
						</div>
					</div>
				</div>

				<ul class="topbar-right login-mod">
					<li class="dropdown dropdown-profile"><a
						href="javascript:void(0)" data-toggle="dropdown"> <img
							class="img-avatar img-avatar-48 m-r-10"
							src="images/headPhoto1.jpg" alt="灰质"> <span id="myname2">${sessionScope.user.uname}<span
								class="caret"></span></span>
					</a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li><a href="userInfo.jsp"><i class="mdi mdi-account"></i>
									个人信息</a></li>
							<li><a href="#" data-toggle="modal" data-target="#updatepwd"><i
									class="mdi mdi-lock-outline"></i> 修改密码</a></li>
							<li class="divider"></li>
							<li><a href="../loginOutServlet"><i
									class="mdi mdi-logout-variant"></i> 退出登录</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		</header>
		<!--页面主要内容-->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12 profilebg">
					<div class="mesosphere-photo">
						<div class="profile_cover_link">
							<img class="head_photo" src="images/headPhoto1.jpg"
								onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
								alt="@Arya." class="profile__cover" id="profileHead">
						</div>
					</div>
					<div class="mesosphere-name">
						<div class="profile_cover_name_link">${sessionScope.user.uname}

						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-2">
					<div class="grid-demo"></div>
				</div>
				<div class="col-md-8">

					<div class="card-body">
						<ul class="nav nav-tabs nav-justified">
							<li class="active"><a data-toggle="tab" href="#home-basic"
								aria-expanded="true">搜索结果</a></li>
							<!--  <li class="nav-item"><a data-toggle="tab"
								href="#profile-basic" aria-expanded="false">我创建的歌单</a></li>-->
							<!--<li class="nav-item">
									<a data-toggle="tab" href="#messages-basic" aria-expanded="false">梁羽生</a>
								</li>
								<li class="nav-item">
									<a data-toggle="tab" href="#settings-basic" aria-expanded="false">陈青云</a>
								</li>-->
						</ul>
						<div class="tab-content">
							<!--tab-pane fade active in点击进行两个面板的切换-->
							<!--切换面板后的显示数据class="tab-pane fade" -->
							<div class="tab-pane fade active in" id="home-basic">
								<div class="songlist_toolbar" style="margin-bottom: 20px;">
									<button class="btn btn-success btn-label btn-w-md all_play">
										<label><i class="mdi mdi-play-circle-outline"></i></label>播放全部
									</button>
									<button class="btn btn-secondary btn-label btn-w-md all_fav">
										<label><i class="mdi mdi-library-plus"></i></label>添加到
									</button>
									<button class="btn btn-secondary btn-label btn-w-md all_down">
										<label><i class="mdi mdi-arrow-down-bold"></i></label>下载
									</button>
									<button class="btn btn-secondary btn-label btn-w-md batch">
										<label><i class="mdi mdi-menu"></i></label>批量操作
									</button>
								</div>
								<table class="table table-hover" id="music-collection"
									style="width: 100%;">
									<thead>
										<tr>
											<th style="width: 7%;">#</th>
											<th style="width: 20%;">歌曲</th>
											<th>歌手</th>
											<th>专辑名</th>
											<th>音乐编号</th>
											<th>操作</th>
											<!--<th>时长</th> -->
										</tr>
									</thead>

								</table>
							</div>


						</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="grid-demo"></div>
				</div>
			</div>
			<!--<div class="row">
					<div class="footer-copyright">
						<p>华夏易正（北京）文化传媒有限公司 版权所有 京ICP备15041558号</p>
						<p>电话：400-666-4061 地址：北京市海淀区羊坊店路18号1幢11层1110室</p>
					</div>
				</div>-->
		</div>

	</div>

	<!-- 修改密码模态框   wwb -->
	<div class="modal fade" id="updatepwd" tabindex="-1" role="dialog"
		aria-labelledby="updatepwd">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">密码修改</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="user-name" class="control-label">原密码：</label> <input
								type="password" class="form-control" id="updatepwd1"
								placeholder="请输旧密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">新密码：</label> <input
								type="password" class="form-control" id="updatepwd2"
								placeholder="请输新密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">再次新密码：</label> <input
								type="password" class="form-control" id="updatepwd3"
								placeholder="请再次输入新密码...">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_update">确认修改</button>
				</div>
			</div>
		</div>
	</div>
	<!--tabs标签页的必备-->
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<!--下面这个会报错no element is specified to initialize -->
	<!--<script type="text/javascript" src="js/main.min.js"></script> -->
	<script src="js/script.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript"></script>
	<script>
	
// 		window.onload=function (){
// 			$("#myname2").html("${sessionScope.user.uname}"+<span class='caret'></span>);
// 		}
		layui.use('element', function() {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			//监听导航点击
			element.on('nav(demo)', function(elem) {
				//console.log(elem)
				layer.msg(elem.text());
			});
		});
		layui.use([ 'carousel', 'form' ], function() {
			var carousel = layui.carousel, form = layui.form;
			carousel.render({
				elem : '#test10',
				width : '778px',
				height : '440px',
				interval : 5000
			});
		});
		//显示我喜欢的歌曲，由datatables插件提供
		//表头里面的小杂质好像是排序用的   
		var t1 = 1;
		var t2 = 2;
		var t3="${param.search}";
		$(function() {
			//var extraEle = 1;
	     $.ajax({
					"url":"http://192.168.11.240:3000/search",
					"type" : "get",
					"data":{
						"keywords":"${param.search}"
					},
					"success":function(data){
						//console.log(data);
					//	console.log(data.result.songs[1].name);//歌名
					//	console.log(data.result.songs[1].album.name);//专辑名
					//	console.log(data.result.songs[1].artists[0].name);//歌手名
					//	console.log(data.result.songs[1].id);
						var mname;
						var sname;
						var tname;//专辑名
						var item;
						var id;
						for(var i=0;i<30;i++){
							mname=data.result.songs[i].name;
							sname=data.result.songs[i].artists[0].name;
							tname=data.result.songs[i].album.name;
							id=data.result.songs[i].id;
							//console.log(data.result.songs[1].id);
							item="<tr><td>"+(i+1)+"</td><td>"+mname+"</td><td>"+sname+"</td><td>"+tname+"</td><td>"+id+"</td><td><i class='mdi mdi-play playit' id="+(id)+" style='font-size:20px;line-height:100%;cursor:pointer;color=lightgreen'></i></td></tr>";
							$(".table").append(item);
						}
						$("#music-collection").DataTable();
						
					}
				
				//第一列
		        //order: [[ 1, 'asc']],						
			
			
			});
			//第一列序号自增
			//t1.on( 'order.dt search.dt', function () {
			//	t1.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			//    	cell.innerHTML = i+1;
		//	    });
		//	}).draw();
			//为每一个tr添加事件即响应函数
			//$('#music-collection tbody tr');
		  // 	t1.on('mouseover', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				//$(this).find("i").css("opacity",1);
				//var song_id = $(this).find('td').eq(4).text();
				//$(this).find("i").eq(0).attr("id",song_id);
				//$($(t1.row(this)).find('i')).css("opacity", "1");
		//	});
		//	t1.on('mouseout', 'tr', function() {
				//console.log($(this).find("i").css("opacity",1));
				//$(this).find("i").css("opacity",0);
				
				//$($(t1.row(this)).find('i')).css("opacity", "1");
		//	});
			
		//	t2 = $('#list-collection').DataTable({
				//默认保留搜索功能
			//	"paging": true,//分页启用与否
			//    "ordering": false,//顺序倒序显示与否
			    //"info": false,//页脚信息显示与否
			//	ajax : "../ums.do?op=getlovedlists&uid=1",
			//	columnDefs : [ {
			  //      searchable : false,
			  //      orderable : false,
			 //       targets : 0
			 //       } ],
			//	columns : [
			//		{data : null},
			//		{data : "lname"},
			//		{data : null}
					//{data : "counts"}, 
					//{data : "tname"},
					//{data : "mlike"}, 
					//{data : "url"}, 
					//{data : "collect"}, 
					//{data : "download"},
				//	{"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>&nbsp;&nbsp;<button class='btn btn-info' data-toggle='modal' data-target='#myModal'><i class='mdi mdi-window-close'></i>更新</button>"}
			//	]
		//	});
		//	t2.on( 'order.dt search.dt', function () {
			//	t2.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			//    	cell.innerHTML = i+1;
			//    });
		//	}).draw();
			//为每一个tr添加事件即响应函数
		//	t2.on('click', 'tr', function() {
		//		var s = t2.row(this).data();
		//		alert('You clicked on '+s[0]+'\'s row');
		//	});
	});
	</script>
<!-- cyf用户在输入框搜索音乐的方法 -->
<script type="text/javascript">
	function searchMusic() {
		//console.log($("#searchmusic").val());
		window.open("searchListTest.jsp?search="+$("#searchmusic").val());
	}


</script>
<!-- cyf用户在输入框搜索音乐的方法结束 -->
<script type="text/javascript">
$(function() {
    $("document").ready(function(){
  	  var flag=${sessionScope.user!=null};
  	  if(flag){
  		  $(".show-login").hide();
				var myname = $("#myname");
				myname.text("${sessionScope.user.uname}");
				$(".show-profile")
						.show();
  	  }
    });
	});


</script>
<script type="text/javascript">
	<!-- 修改密码功能，校验输入的旧密码是否与session中的密码相同  --wwb -->
		$(function(){
			$("#updatepwd1").blur(function(){
				var upwd="";
				var flag=${sessionScope.user!=null};
				if(flag){
					$("#updatepwd2").removeAttr("readonly");
					$("#updatepwd3").removeAttr("readonly");
					var oldpwd=$("#updatepwd1").val();
					var upwd=${sessionScope.user.pwd}
					console.log(upwd);
					if(oldpwd!=upwd){
						layui
						.use(
								[
										'layer',
										'form' ],
								function() {
									var layer = layui.layer
									layer
											.alert(
													"密码错误",
													{
														icon : 2,
														skin : 'layer-ext-moon'
													})
								})
								$("#updatepwd2").attr("readonly",true);
								$("#updatepwd3").attr("readonly",true);
						
					}
				}								
			});			
			// 修改密码功能，再次输入密码与新密码比较   wwb 				
			$("#updatepwd3").blur(function(){
				$("#btn_update").attr("disabled", false);
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				if(renewpwd!=newpwd){
					layui
					.use(
							[
									'layer',
									'form' ],
							function() {
								var layer = layui.layer
								layer
										.alert(
												"密码不一致",
												{
													icon : 2,
													skin : 'layer-ext-moon'
												})
							})
							$("#btn_update").attr("disabled", true); 
				}
				
			});
			
			//修改密码功能，确认修改按钮事件   wwb
			$("#btn_update").click(function(){
				var oldpwd=$("#updatepwd1").val();
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				var uid=${sessionScope.user.uid}
				//console.log(uid);
				$.ajax({
					type:"post",
					url:"../ZhuCeServlet?op=updatePwd",
					data:{
						"oldpwd":oldpwd,
						"newpwd":newpwd,
						"uid":uid
					},
					success:function(data){
						if(data.msg=="修改成功"){
							layui
							.use(
									[
											'layer',
											'form' ],
									function() {
										var layer = layui.layer;
										layer
												.alert(
														"修改成功，请重新登入",
														{
															icon : 2,
															skin : 'layer-ext-moon',
															time : 5000
														})
													
									})
									window.location.href="../loginOutServlet";
						}
					}
					
				});
			});
			
		});
	</script>
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script src="js/homePage.js" charset="utf-8"></script>



</body>
</html>